<template>
  <!-- 我的消息内容 -->
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="tab in tabList"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
        <div>
          <el-button size="mini" type="primary" v-if="tab.type != 1" style=""
            >标记已读</el-button
          >
        </div>

        <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column fixed prop="date" label="消息标题" width="250">
          </el-table-column>
          <el-table-column
            prop="name"
            label="消息类型"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="province"
            label="通知时间"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="city" label="内容" width="250" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="display: flex; justify-content: flex-end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="100"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabList: [
        {
          label: "未读消息",
          name: "dataResource",
          content: "这是数据资源的内容。",
          type: 0,
        },
        {
          label: "已读消息",
          name: "serviceResource",
          content: "这是服务资源的内容。",
          type: 1,
        },
      ],
      currentPage: 1,
      currentPage1: 1,
      search1: "",
      search: "",
      activeName: "dataResource",
      tableData: [],
      tableData1: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>